<!--
 * @Descripttion: 
 * @version: 1.0
 * @Author: Ankang
 * @Date: 2021-06-08 20:16:58
 * @LastEditors: Ankang
 * @LastEditTime: 2021-06-14 21:04:00
-->
<template>
  <div class="content">
    <van-nav-bar
      title="好文详情"
      left-text="返回"
      left-arrow
      fixed
      placeholder
      @click-left="onClickLeft"
    />
    <div class="article">
      <ArticleDetailCon :data="data"></ArticleDetailCon>
    </div>
    <div class="footer">
      <div class="store">
        <div>
          <p><van-icon name="like-o" />{{ data.article_favorite }}</p>
        </div>
        <div>
          <p><van-icon name="star-o" />{{ data.article_collection }}</p>
        </div>
      </div>
      <div class="share" @click="showShare = true"><p>分享</p></div>
    </div>
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />
  </div>
</template>



<script>
import axios from "axios";
import Vue from "vue";
import { NavBar, ShareSheet, Toast, Icon, Sticky } from "vant";
Vue.use(NavBar);
Vue.use(ShareSheet);
Vue.use(Icon);
Vue.use(Sticky);

import ArticleDetailCon from "./ArticleDetailCon.vue";
export default {
  components: {
    ArticleDetailCon,
  },
  data() {
    return {
      data: {},
      showShare: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "微博", icon: "weibo" },
          { name: "复制链接", icon: "link" },
          { name: "小程序码", icon: "weapp-qrcode" },
          { name: "二维码", icon: "qrcode" },
          { name: "分享海报", icon: "poster" },
        ],
      ],
      // f:"wxapp",
      // wxapp:"zdmapp",
      // id:83387979,
      // request_str:"sUBIjIO8IwbYRq9AFNzTBw%253D%253D",
    };
  },
  methods: {
    async loadData() {
      let result = await axios.get(
        `/zdmapp/post_detail?f=wxapp&wxapp=zdmapp&id=83387979&request_str=sUBIjIO8IwbYRq9AFNzTBw%253D%253D`
      );
      this.replaceData(result);
    },
    replaceData(data) {
      let data2 = data.data.data.article_filter_content.replace(
        /https\:\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*(:(0-9)*)*(\/?)([a-zA-Z0-9\-\.\?\,\'\/\\\+&amp;%\$#_]*)?/g,
        function (match, param, offset, string) {
          return (match = "https://images.weserv.nl/?url=" + match);
        }
      );
      data.data.data.article_filter_content = data2;
      this.data = data.data.data;
      console.log(this.data);
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
  },
  async mounted() {
    await this.loadData();
  },
};
</script>



<style lang="stylus"  scoped>
.content
  height 100%
  width 100%
  overflow hidden
  background #eee
  .footer
    height 0.55rem
    width 100%
    background #eee
    position fixed
    bottom 0
    display flex
    .store
      flex 1.5
      height 100%
      display flex
      div
        flex 1
        p
          text-align center
          line-height 0.55rem
          font-size 14px
          height 100%
          vertical-align bottom
    .share
      flex 1
      background red
      p
        font-size 21px
        color #fff
        text-align center
        line-height 0.55rem
</style>